import React from 'react';
import { Row, Col } from 'antd';

const Detail = ({ value = [], horizontal = false, span: conSpan = 6, labelSpan: conLabelSpan = 6, style }) => {
  return (
    <Row style={style} gutter={10}>
      {value.map(({ label, value, span, labelSpan }, index) => (
        <Col key={index} span={span || conSpan} style={{ marginBottom: '20px' }}>
          {horizontal ? (
            <Row>
              <Col span={labelSpan || conLabelSpan}>{label}</Col>
              <Col
                span={24 - (labelSpan || conLabelSpan)}
                style={{ color: 'rgba(114,123,141,1)', wordBreak: 'break-all' }}
              >
                {value}
              </Col>
            </Row>
          ) : (
            <Row>
              <p style={{ marginBottom: '10px' }}>{label}</p>
              <span style={{ color: 'rgba(114,123,141,1)', wordBreak: 'break-all' }}>{value || '-'}</span>
            </Row>
          )}
        </Col>
      ))}
    </Row>
  );
};

export default Detail;
